<template>
  <el-container style="height: 100%;display: flex;flex-direction: column">
    <el-main class="main-select-body bgfff">
      <div class="table-bg"></div>
      <el-form inline>
        <el-form-item>
          <el-button type="primary" @click="$router.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
      <el-table
        class="marT20"
        :data="tableData"
        :height="300"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column width="70" align="center" type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
        <el-table-column :label="$t('base.table.action')">
          <template slot-scope="scope">
            <el-button type="text" @click="dialogEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="changePageNo"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
      <el-dialog
        append-to-body
        width="600px"
        title="查看详情"
        :visible.sync="dialogValue"
        @close="emitClose"
      >
        <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
          <el-form-item label="标题">{{ ruleForm.opinionTitle}}</el-form-item>
          <el-form-item label="特情详情" prop="scenarioDesc">{{ ruleForm.opinionContent}}</el-form-item>
          <el-form-item label="下载文件">
            <div
              style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start"
            >
              <el-link
                type="primary"
                 @click="handleDownload(item)"
                 v-for="item in ruleForm.files"
                :key="item.id"
              >
                {{ item.fileName }}
                <i class="el-icon-download"></i>
              </el-link>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="emitClose">取 消</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import curd from "@/mixins/curd";
import { drillDetailAPI as request } from "@/api";
import { downLoadFile } from '@/utils'
export default {
  mixins: [curd],
  data() {
    return {
      condition: {},
      request: {
        page: request.optionsPage,
      },
      columns: [
        { prop: "opinionTitle", label: "处理方案标题" },
        { prop: "scenarioId", label: "对应想定名称" },
        { prop: "createTime", label: "提交时间" },
      ],
      ruleForm: {
        opinionTitle: "",
        opinionContent: "",
        files: [],
      },
    };
  },
  methods: {
    dialogEdit(item) {
      request.readHandleOptions(item.id).then((res) => {
        this.ruleForm = {
          opinionTitle: res.opinionTitle,
          opinionContent: res.opinionContent,
          files: res.files,
        };
      });
      this.dialogValue = true;
    },
     handleDownload(item) {
      downLoadFile(item)
    }
  },
};
</script>

<style>
</style>
